<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>日志查看</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="/log/css/element-ui@2.13.0.css" />
    <style>
        body,
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        #app {
            height: 100%;
            width: 100%;
        }

        #header {
            position: fixed;
            top: 0;
            left: 0;
            background-color: #eee;
            padding: 20px;
            padding: 10px 20px;
            width: 100%;
            z-index: 999
        }

        #header .right {
            float: right;
        }

        #header .right i {
            line-height: 25px;
        }

        #content {
            white-space: nowrap;
            height: 99%;
            width: 99.5%;
            overflow: scroll;
            padding: 52px 10px 10px;
            box-sizing: border-box;
        }

        #content::-webkit-scrollbar-track-piece {
            /* 滚动条凹槽的颜色，还可以设置边框属性 */
            background-color: #f8f8f8;
        }

        #content::-webkit-scrollbar {
            /* 滚动条的宽度 */
            width: 9px;
            height: 9px;
        }

        #content::-webkit-scrollbar-thumb {
            /* 滚动条的设置 */
            background-color: #dddddd;
            background-clip: padding-box;
            min-height: 28px;
        }

        #content::-webkit-scrollbar-thumb:hover {
            background-color: #bbb;
        }

        .el-icon-setting {
            float: right;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-row id="header">
            <el-col :span="19">
                <el-button type="danger" size="small" @click="reset()">重置面板及计行器</el-button>
                <el-select v-model="options.data.path" size="small" placeholder="请选择">
                    <el-option v-for="item in logFiles" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary" size="small" @click="getLogContent()">拉取日志</el-button>
                <el-button :type="autoButtonObj.type" size="small" :icon="autoButtonObj.icon" @click="doAuto()">{{autoButtonObj.text}}</el-button>
            </el-col>
            <el-col class="right" :span="1">
                <i class="el-icon-setting" @click="options.dialog=true"></i>
            </el-col>

        </el-row>
        <el-dialog title="日志配置（改动实时生效保存）" :visible.sync="options.dialog" width="60%">
            <el-form :model="options.data" label-width="240px">
                <el-form-item label="实时监听时间间隔：">
                    <el-input-number size="small" v-model="options.data.time" :step="200" controls-position="right" @change="timeChange" :min="200"></el-input-number>&nbsp;&nbsp;ms
                </el-form-item>
                <!-- <el-form-item label="活动区域">
                    <el-select v-model="options.data.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item> -->
            </el-form>
        </el-dialog>
        <el-scrollbar ref="content" id="content" v-html="logContent">{{logContent}}</el-scrollbar>
    </div>
</body>
<!-- import Vue before Element -->
<script src="/log/js/vue@2.6.11.js"></script>
<script src="/log/js/vue-resource@1.5.1.min.js"></script>
<!-- import JavaScript -->
<script src="/log/js/element-ui@2.13.0.js"></script>
<script th:inline="javascript">
    new Vue({
        el: '#app',
        data: function() {
            return {
                logContent: "",
                getFlag: true,
                logFiles: [],
                options: {
                    dialog: false,
                    data: {
                        time: 1000,
                        path: "",
                    }
                },
                auto: {
                    flag: false,
                    lockFlag: false,
                    interval: {},
                    count: 0
                }
            }
        },
        computed: {
            autoButtonObj() {
                return this.auto.flag ? {
                    text: `正在实时监听（拉取间隔：${this.options.data.time} ms；已拉取次数：${this.auto.count}）`,
                    icon: "el-icon-video-pause",
                    type: "warning"
                } : {
                    text: "开启实时监听",
                    icon: "el-icon-video-play",
                    type: "primary"
                };
            },
        },
        watch: {
            'options.data': {
                handler(nv, ov) {
                    nv && localStorage.setItem("logOptionsData", JSON.stringify(nv));
                },
                deep: true
            },
            'options.data.path': {
                handler(nv, ov) {
                    if (nv != ov) {
                        this.logContent = "";
                        this.getLogContent();
                    }
                },
                // immediate: true, //刷新加载 立马触发一次handler
                //deep: true // 可以深度检测到 person 对象的属性值的变化
            },
        },
        updated: function() {
            let _this = this;
            this.$nextTick(function() {
                if (!_this.auto.lockFlag) {
                    var div = document.getElementById('content');
                    div.scrollTop = div.scrollHeight;
                }
            })
        },
        mounted() {
            // 加载日志文件
            this.getLogFiles();
            // 关闭或刷新时，重置面板及计行器
            window.onunload = function() {
                var img = new Image();
                img.style.display = 'none';
                img.src = `/log/reset`; // 服务端处理接口
                document.body.appendChild(img);
            };
            //this.getLogContent();
        },
        methods: {
            /* 初始化配置 */
            async initConfig() {
                let _this = this;
                // 加载本地配置
                let localOptionsData = window.localStorage.getItem("logOptionsData");
                if (localOptionsData && localOptionsData != null && localOptionsData != '') {
                    _this.options.data = JSON.parse(localOptionsData);
                }
                try {
                    let res = await _this.$http.post("/logApi/initConfig", _this.options.data)
                    _this.logFiles = res.body.data;
                    /* if (_this.logFiles.length > 0) {
                        _this.options.data.path = _this.logFiles[0].value;
                    } */
                    /* if (localOptionsData && localOptionsData != null && localOptionsData != '') {
                        this.options.data = JSON.parse(localOptionsData);
                    } */
                } catch (error) {
                    console.log(error);
                    _this.$message.error('连接异常');
                }
            },
            /* 获取日志文件列表 */
            async getLogFiles() {
                let _this = this;
                try {
                    let res = await _this.$http.get("/logApi/getLogFiles")
                    _this.logFiles = res.body.data;
                    /* if (_this.logFiles.length > 0) {
                        _this.options.data.path = _this.logFiles[0].value;
                    } */
                    // 加载本地配置
                    let localOptionsData = window.localStorage.getItem("logOptionsData");
                    if (localOptionsData && localOptionsData != null && localOptionsData != '') {
                        this.options.data = JSON.parse(localOptionsData);
                    }
                } catch (error) {
                    console.log(error);
                    _this.$message.error('连接异常');
                }
            },
            /* 获取日志内容 */
            async getLogContent() {
                let _this = this;
                if (!_this.getFlag) {
                    return;
                }
                _this.getFlag = false;
                try {
                    let res = await _this.$http.get(`/logApi/getLogContent?path=${_this.options.data.path}`)
                    this.auto.flag && this.auto.count++;
                    if (res.body.data != "") {
                        _this.logContent += "<br />" + res.body.data;
                    }
                } catch (error) {
                    console.log(error);
                    if(_this.auto.flag){
                    	_this.doAuto();
                    }
                    _this.$message.error('连接异常');
                }
                _this.getFlag = true;
            },
            /* 开启或关闭实时监听 */
            doAuto() {
                let _this = this;
                if (_this.auto.flag) {
                    clearInterval(_this.auto.interval);
                    _this.auto.flag = false;
                } else {
                    _this.auto.interval = setInterval(function() {
                        _this.getLogContent()
                    }, _this.options.data.time);
                    this.auto.count = 0;
                    _this.auto.flag = true;
                }
            },
            /* 修改实时监听时间事件 */
            timeChange(currentValue, oldValue) {
                let _this = this;
                if (_this.auto.flag) {
                    clearInterval(_this.auto.interval);
                    _this.auto.interval = setInterval(function() {
                        _this.getLogContent()
                    }, _this.options.data.time);
                }
            },
            /* 重置面板及计数器 */
            async reset() {
                let _this = this;
                _this.logContent = "";
                try {
                    let res = await _this.$http.get("/logApi/reset")
                } catch (error) {
                    console.log(error);
                    _this.$message.error('连接异常');
                }
            }
        }
    })
</script>

</html>